<template>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5" v-for="button in buttons" :key="button.key">
      <el-button 
        :type="button.type" 
        :icon="button.icon" 
        size="mini" 
        @click="handleClick(button.key)"
        v-hasPermi="button.permission || []"
      >
        {{ button.label }}
      </el-button>
    </el-col>
    <el-col :span="1.5" v-if="showExpandButton && !showSearch">
      <el-button type="text" icon="el-icon-arrow-down" size="mini" @click="handleExpand">展开搜索</el-button>
    </el-col>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQueryTable"></right-toolbar>
  </el-row>
</template>

<script>
import RightToolbar from "@/components/RightToolbar";

export default {
  name: "ActionButtons",
  components: {
    RightToolbar
  },
  props: {
    buttons: {
      type: Array,
      required: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    showExpandButton: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClick(key) {
      this.$emit('action-click', key)
    },
    handleExpand() {
      this.$emit('expand-search')
    },
    handleQueryTable() {
      this.$emit('query-table')
    }
  }
}
</script>
